<template>
	<ul class="list">
		<li 
		@click='handleClick'  
		class="item" 
		:key='key'
		v-for='key of letter'
		@touchstart='touchStart'
		@touchmove='touchMove'
		@touchend='touchEnd'
		:ref='key'
		>{{key}}
	</li>
	</ul>
</template>
<script>
	export default{
		//点击事件的监听
		name:'SideLine',
		props:{
			cities:Object,
		},
		computed:{
			letter:function(){
			var letter=[];
			for(var item in this.cities){
				letter.push(item);
			};
			return letter
			}
		},
		methods:{
			handleClick:function(e){
			this.$emit('change',e.target.innerText);
			},
			//手指放到屏幕时触发
			touchStart:function(){
				this.touchStatus=true;
			},
			//手指滑动时触发e为事件
			//提高性能每隔一段时间再触发change事件
			touchMove:function(e){
				if(this.touchStatus){
					//touches[0]当前手指的一些信息
					if(this.timer){
						clearTimeout(this.timer);
					};
					setTimeout(()=>{
					var touchY=e.touches[0].clientY;
					var index=Math.floor((touchY-this.top-79)/40);
					this.$emit('change',this.letter[index]);
					},16);
				}
			},
			//手指离开屏幕时触发
			touchEnd:function(){
				this.touchStatus=false
			}
		},
		//右边框从{}到从ajax获取到数据且渲染完成时触发
		updated:function(){
			this.top=this.$refs['A'][0].offsetTop;
		},
		data:function(){
			return {
			touchStatus:false,
			top:0,
			timer:null

			}
		}
	}
</script>
<style lang='stylus' scoped>
@import '~styles/varibles.styl'
.list
	display:flex
	flex-direction:column
	justify-content:center
	position:absolute
	top:3.8rem
	right:0
	bottom:0
	width:0.4rem
	.item
		color:$bgColor
		text-align:center
		height:0.4rem
</style>